<template>
    <div id="wf">
        <div class="logo-box">
            <div class="convphoto-title">随手拍</div>
            <div class="convphoto-subtitle">
                <i class="line"></i>获取城市积分
                <i class="line"></i>
            </div>
        </div>
        <div v-for="item in photos" class="photo-container">
            <div class="img-box" @click="godetail(item.id)">
                <img :src="item.photo" @load="arrange">
            </div>
            <div class="subinfo-box">
                <span class="title" @click="godetail(item.id)" v-text="item.title">敬业的人们</span>
                <span class="vote-box" :class="{'active': item.praised}" @click="praise(item)">
                    <i :class="{'vote-icon': true}"></i>
                    <i class="vote-num" v-text="item.praiseCount"></i>
                </span>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import index from './index1';
export default index;
</script>


<style lang="less" scoped>
@width: 167px;

#wf {
    position: relative;
    margin: 11px auto;
    .photo-container {
        width: @width;
        position: absolute;
        top: 0;
        left: 0; // .transition(left 1s);
        img {
            width: 100%;
            position: relative;
        }
    }
}

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}
.logo-box {
    position: absolute;
    width: 167px;
    height: 70px;
    right: 15px;
    top: 0;
    background: url('../img/plogo.png') no-repeat center;
    background-size: cover;
}

.convphoto-title {
    margin-top: 14px;
    text-align: center;
    font-family: STHeitiSC-Medium;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.53px;
}

.convphoto-subtitle {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.47px;
    line-height: 18px;
    margin-top: 5px;
    text-align: center;
}

.line {
    display: inline-block;
    width: 16px;
    height: 1px;
    opacity: 0.56;
    background: #FFFFFF;
    vertical-align: middle;
    margin: 0 3px;
}

.img-box {
    line-height: 0;
    min-height: 100px;
}

.subinfo-box {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
    margin: 8px 0 14px 0;
    overflow: hidden;
}

.title {
    float: left;
    display: block;
    width: 110px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-box {
    float: right;
    font-size: 0;
    display: block;
}


.vote-box .vote-icon {
    background: url('../img/novote.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-top: -3px; 
}

.vote-box.active .vote-icon {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover;
}

.vote-box .vote-num {
    font-size: 14px;
    color: #868686;
     margin-left: 5px;
    vertical-align: middle;
}

.vote-box.active .vote-num {
    color: #DF3031;
}

</style>